<template>
	<view class="form">
		<uv-form :model="form.modal" :rules="form.rules" ref="form1" :labelStyle="labenStyle" labelWidth="150rpx"
			labelAlign="center" errorType="toast">
			<view class="form-box" :class="item.type==2?'form-box-text':''" v-for="(item,index) in form.formList"
				:key="index">
				<view class="" style="color: #DD001B;" :style="{visibility:item.required?'':'hidden'}">
					*
				</view>
				<view class="input" v-if="item.type==1">
					<uv-form-item :label="item.label" :prop="item.value">
						<uv-input v-model="form.modal[item.value]" :type="item.rules.type"
							:placeholder="`请输入${item.label}`" border="none" :readonly="item.readonly" />
					</uv-form-item>
				</view>
				<view class="" v-if="item.type==2" style="width: 600rpx;">
					<uv-form-item style="width: 600rpx;" :prop="item.value">
						<uv-textarea v-model="form.modal[item.value]" :placeholder="`请输入${item.label}`"
							border="none"></uv-textarea>
					</uv-form-item>
				</view>
				<view class="" v-if="item.type==3" style="width: 600rpx;">
					<uv-form-item :prop="item.value" @click="selectIndex(item)">
						<uv-input v-model="form.modal[item.value]" :placeholder="`请选择${item.label}`" border="none"
							readonly />
					</uv-form-item>
				</view>
				<view class="" v-if="item.type==4">
					<view class="aside-box">
						{{item.label}}
					</view>
					<uv-form-item :prop="item.value">
						<uv-radio-group v-model="form.modal[item.value]" :activeColor="item.selectColor">
							<uv-radio :customStyle="{margin: '8px'}" v-for="(item1, index1) in item.selectArray"
								:key="index1" :label="item1.name" :name="item1.id">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
				</view>
				<view class="" v-if="item.type==5">
					<uv-form-item :prop="item.value">
						<uni-data-picker v-model="form.modal[item.value]" style="width: 600rpx;" :border="false"
							:localdata="item.selectArray" :placeholder="item.label" :popup-title="item.label"
							:map="mapData" field="code as value, name as label"></uni-data-picker>
					</uv-form-item>
				</view>
				<view class="" v-if="item.type==6">
					<uv-form-item :prop="item.value" :label="item.label" @click="selectDate(item)">
						<uv-input v-model="form.modal[item.value]" :placeholder="`请选择${item.label}`" border="none"
							readonly />
					</uv-form-item>
				</view>
			</view>
			<slot></slot>
		</uv-form>

		<view class="j-btn">
			<uv-button type="primary" shape="circle" text="确定" @click="subbtn"></uv-button>
		</view>

		<uv-picker ref="picker" keyName="name" :columns="form.columns" @confirm="confirm"></uv-picker>
		<uv-datetime-picker ref="datepicker" :value="Number(new Date())" :mode="dateType" @confirm="dateConfirm">
		</uv-datetime-picker>
	</view>

</template>


<script setup>
	//  封装的基于uv框架和uni-app的动态表单组件，
	// 目前只封装了基础的表单
	// 样式问题可以直接在源码上进行修改，因为东西不多，做一些样式属性没有啥意义
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	// 这个引用了uni官方的插件,没引入记得引用
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'


	const props = defineProps({
		jList: {
			type: Array,
			default: [{
					initvalue: '', //初始值
					value: 'name',
					label: '姓名',
					required: true,
					type: 1, //1是input，2是textarea，3是选择器，4是单选框，5是三级选择,6是时间选择
					rules: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}
				}, {
					initvalue: '',
					value: 'desc',
					label: '备注',
					required: true,
					type: 2,
					rules: {
						type: 'string',
						required: true,
						message: '请输入备注',
						trigger: ['blur', 'change']
					}
				},
				{
					initvalue: '',
					value: 'agree',
					label: '选择是否同意',
					required: false,
					selectArray: [{
							name: "苹果",
							id: 1
						},
						{
							name: "香蕉",
							id: 10
						}
					],
					selectColor: '',
					type: 4,
					rules: {
						type: 'number',
						required: true,
						message: '请选择是否同意',
						trigger: ['blur', 'change']
					}
				},
				{
					initvalue: '',
					value: 'type',
					label: '类型',
					required: true,
					selectArray: [{
							name: "中国",
							id: 1
						},
						{
							name: "日本",
							id: 2
						}
					],
					type: 3, //1是input，2是textarea，3是选择器，4是单选框
					rules: {
						type: 'string',
						required: true,
						message: '请选择类型',
						trigger: ['blur', 'change']
					}
				},
				{
					initvalue: '',
					value: 'selectAdd',
					label: '类型',
					required: true,
					selectArray: [{
							text: "一年级",
							value: "1-0",
							children: [{
									text: "1.1班",
									value: "1-1"
								},
								{
									text: "1.2班",
									value: "1-2"
								}
							]
						},
						{
							text: "三年级",
							value: "3-0"
						}
					],
					type: 5, //1是input，2是textarea，3是选择器，4是单选框
					rules: {
						type: 'string',
						required: true,
						message: '请选择类型',
						trigger: ['blur', 'change']
					}
				},
				{
					initvalue: '',
					value: 'date',
					label: '时间',
					required: true,
					type: 6,
					dateType: 'year', //时间选择类型
					rules: {
						type: 'string',
						required: true,
						message: '请选择时间',
						trigger: ['blur', 'change']
					}
				}
			]
		}
	})


	const mapData = {
		text: 'text',
		value: 'value',
	};



	const form = reactive({
		formList: props.jList,
		modal: {}, //用来存储字段名
		columns: [],
		rules: {},
	});

	watch(form.formList, (newValue) => { //监听处理数据变化，数据没有渲染问题
		form.formList.map(item => { //处理字段名
			form.modal[item.value] = item.initvalue
			form.rules[item.value] = item.rules
		})

		console.log(form.formList, '监听');
	}, {
		deep: true,
		immediate: true,
	})




	const picker = ref(null);

	const labenStyle = {
		'fontSize': '24rpx',
		"color": '#999999',
	};

	let currentItem = {} //当前选择的（3类型，picker选择器
	const selectIndex = (item) => {
		currentItem = item
		picker.value.open()
		form.columns = [item.selectArray]
		console.log(item, form.columns);
	}

	const confirm = (e) => {
		// console.log(e, currentItem.value, form.modal);
		let a = currentItem.value
		form.modal[a] = e.value[0].name
	}


	// 处理多个时间选择
	const datepicker = ref(null);
	let dateType = ref('datetime');
	let currentdate = {};

	const selectDate = (item) => {
		dateType.value = item.dateType
		console.log(item, 'item');
		currentdate = item;
		datepicker.value.open()
	}

	const dateConfirm = (e) => {
		let a = currentdate.value
		console.log('时间', e);

		let b = dateType.value
		let c = b == 'year' ? 'yyyy' : b == 'year-month' ? 'yyyy-mm' : b == 'date' ? 'yyyy-mm-dd' : 'yyyy-mm-dd hh:MM'

		form.modal[a] = uni.$uv.timeFormat(e.value, c)
	}



	// 

	const emits = defineEmits(['subbtn'])


	const form1 = ref(null)
	const subbtn = () => {

		form1.value.validate().then(res => {

			emits('subbtn', form.modal)
		}).catch(error => {})

	}
</script>

<style lang="scss" scoped>
	.form {
		box-sizing: border-box;
		padding: 20rpx 20rpx;

		.form-box {
			width: 100%;
			display: flex;
			align-items: center;
			border: 1rpx solid #E5E7EB;
			margin-top: 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0rpx 10rpx;

			.input {
				width: 100%;
			}
		}

		.form-box-text {
			align-items: flex-start;
		}
	}

	.form .form-box .aside-box {
		height: 20rpx;
		font-size: 28rpx;
		padding-top: 30rpx;
		padding-left: 10rpx;
	}



	.j-btn {
		width: 100%;
		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>